<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>患者档案-实验室检测</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../../common/css/vant-index.css" />
		<!-- 引入 viewer 图片预览样式文件 -->
		<link href="../../common/css/viewer.css" rel="stylesheet" />
		<style rel="stylesheet">
			body {
				background-color: #f7f8fa;
			}

			a {
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			}

			a:-webkit-any-link {
				color: #eee;
			}

			img {
				max-width: 45%;
			}

			.container {
				border: 1px solid #f5f5f5;
				box-shadow: -1px 5px 5px #ececec;
				border-radius: 10px;
				/* margin: 0.6rem; */
				padding: 0;
			}

			#sub-title {
				margin-top: 0.5rem;
				margin-bottom: 0.5rem;
				margin-left: 1rem;
			}

			.icon {
				display: inline-block;
				background-color: #e22e30;
				width: 0.5rem;
				height: 0.5rem;
				margin-right: 0.5rem;
			}

			.text {
				display: inline-block;
				font-size: 1.1rem;
				font-weight: 450;
				color: #555555;
			}

			.van-cell-group--inset {
				margin: 0;
			}

			.lists,
			.texts {
				color: #8c8c8c;
			}

			.texts {
				margin-top: 0.3rem;
			}

			.tab-btn {
				margin: 0.2rem;
				height: 1.7rem;
				line-height: 1.7rem;
			}

			.images-list {
				margin-top: 1rem;
				display: flex;
				flex-flow: wrap;
				align-content: flex-start;
			}

			.image-item {
				margin: 0.2rem;
				flex: 1;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="container">
				<van-nav-bar
					title="实验室检测"
					left-text="返回"
					left-arrow
					@click-left="onClickLeft"
					@click-right="onClickRight"
				>
					<template #right>
						<van-icon name="wap-home-o" size="18" />
					</template>
				</van-nav-bar>

				<div id="sub-title">
					<div class="icon"></div>
					<div class="text">血糖检查</div>
				</div>
				<van-cell-group inset>
					<van-cell>
						<template #title>
							<span class="custom-title">检查日期</span>
						</template>
						<template #value> {{currentData.sugarFastingDate}} </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">空腹血糖</span>
						</template>
						<template #value> {{currentData.sugarFasting}} mmol/L </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">随机血糖</span>
						</template>
						<template #value> {{currentData.sugarRandom1}} mmol/L </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">餐后2h血糖</span>
						</template>
						<template #value> {{currentData.sugarAfter2}} mmol/L </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title"> 糖化血红蛋白(HbA1c) </span>
						</template>
						<template #value> {{currentData.hba1c}} </template>
					</van-cell>
				</van-cell-group>

				<div id="sub-title">
					<div class="icon"></div>
					<div class="text">OGTT+胰岛功能</div>
				</div>
				<div style="font-size: 0.36rem; color: #333333; margin-left: 1rem">
					血糖
				</div>
				<line-charts
					:key="initCharts"
					:x-axis-data="charts.axisData1"
					:y-axis-unit="charts.axisUnit"
					:legend="charts.legend1"
					:series-data="charts.seriesData1"
					:area-style="charts.areaStyle"
					:x-axis-label="charts.xAxisLabel"
					:style="charts.style1"
				></line-charts>

				<div style="font-size: 0.36rem; color: #333333; margin-left: 1rem">
					胰岛素
				</div>
				<line-charts
					:key="initCharts"
					:x-axis-data="charts.axisData2"
					:y-axis-unit="charts.axisUnit"
					:legend="charts.legend2"
					:series-data="charts.seriesData2"
					:area-style="charts.areaStyle"
					:x-axis-label="charts.xAxisLabel"
					:style="charts.style2"
				></line-charts>

				<div style="font-size: 0.36rem; color: #333333; margin-left: 1rem">
					C肽
				</div>
				<line-charts
					:key="initCharts"
					:x-axis-data="charts.axisData3"
					:y-axis-unit="charts.axisUnit"
					:legend="charts.legend3"
					:series-data="charts.seriesData3"
					:area-style="charts.areaStyle"
					:x-axis-label="charts.xAxisLabel"
					:style="charts.style3"
				></line-charts>
				<!-- <van-cell-group inset>
					<van-cell>
						<template #title>
							<span class="custom-title">检查日期</span>
						</template>
						<template #value> {{currentData.ogttPeptideDate}} </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">空腹血糖(服糖前)</span>
						</template>
						<template #value> {{currentData.sugarLimosis}} mmol/L </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">空腹胰岛素(服糖前)</span>
						</template>
						<template #value> {{currentData.isletLimosis}} mlU/L </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">空腹C肽(服糖前)</span>
						</template>
						<template #value> {{currentData.peptideLimosis}} nmol/L </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">30min血糖</span>
						</template>
						<template #value> {{currentData.sugar30min}} mmol/L</template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">30min胰岛素</span>
						</template>
						<template #value> {{currentData.islet30min}} mlU/L</template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">30minC肽</span>
						</template>
						<template #value> {{currentData.peptide30min}} nmol/L </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">1h血糖</span>
						</template>
						<template #value> {{currentData.sugar1h}} mmol/L</template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">1h胰岛素</span>
						</template>
						<template #value> {{currentData.islet1h}} mlU/L</template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">1hC肽</span>
						</template>
						<template #value> {{currentData.peptide1h}} nmol/L</template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">2h血糖</span>
						</template>
						<template #value> {{currentData.sugar2h}} mmol/L</template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">2h胰岛素</span>
						</template>
						<template #value> {{currentData.islet2h}} mlU/L</template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">2hC肽</span>
						</template>
						<template #value> {{currentData.peptide2h}} nmol/L</template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">3h血糖</span>
						</template>
						<template #value> {{currentData.sugar3h}} mmol/L</template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">3h胰岛素</span>
						</template>
						<template #value> {{currentData.islet3h}} mlU/L</template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">3hC肽</span>
						</template>
						<template #value> {{currentData.peptide3h}} nmol/L</template>
					</van-cell>
				</van-cell-group> -->

				<div id="sub-title">
					<div class="icon"></div>
					<div class="text">血脂检查</div>
				</div>
				<van-cell-group inset>
					<van-cell>
						<template #title>
							<span class="custom-title">检查日期</span>
						</template>
						<template #value> {{currentData.hdlcDate}} </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">总胆固醇(TC)</span>
						</template>
						<template #value> {{currentData.tc}} mmol/L </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">甘油三脂(TG)</span>
						</template>
						<template #value> {{currentData.tg}} mmol/L </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title"> 高密度脂蛋白(HDL-C) </span>
						</template>
						<template #value> {{currentData.hdlc}} mmol/L</template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">低密度脂蛋白(LDL-C)</span>
						</template>
						<template #value> {{currentData.ldlc}} mmol/L</template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">非高密度脂蛋白(nonHDL-C)</span>
						</template>
						<template #value> {{currentData.nonHdlc}} mmol/L</template>
					</van-cell>
				</van-cell-group>

				<div id="sub-title">
					<div class="icon"></div>
					<div class="text">肝功能检查</div>
				</div>
				<van-cell-group inset>
					<van-cell>
						<template #title>
							<span class="custom-title">检查日期</span>
						</template>
						<template #value> {{currentData.altDate}} </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">谷丙转氨酶（ALT）</span>
						</template>
						<template #value> {{currentData.alt}} U/L</template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">总胆红素（T-BIL）</span>
						</template>
						<template #value> {{currentData.tbil}} umol/L</template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">谷草转氨酶（AST）</span>
						</template>
						<template #value> {{currentData.ast}} U/L</template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">碱性磷酸酶（ALP）</span>
						</template>
						<template #value> {{currentData.alp}} U/L</template>
					</van-cell>
				</van-cell-group>

				<div id="sub-title">
					<div class="icon"></div>
					<div class="text">肾功能检查</div>
				</div>
				<van-cell-group inset>
					<van-cell>
						<template #title>
							<span class="custom-title">检查日期</span>
						</template>
						<template #value> {{currentData.urineProteinDate}} </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">尿常规（尿蛋白）</span>
						</template>
						<template #value>
							{{currentData.urineProtein == 1 ? '阴性' :
							currentData.urineProtein == 2 ? '阳性': '--'}}
						</template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">尿微量白蛋白（UAE）</span>
						</template>
						<template #value> {{currentData.uae}} ug/min</template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title"> 24h尿白蛋白（24hUAE） </span>
						</template>
						<template #value> {{currentData.uae24}} mg/24h </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">尿白蛋白/尿肌酐（ACR）</span>
						</template>
						<template #value> {{currentData.acr}} mg/g </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">血清肌酐（Cr）</span>
						</template>
						<template #value> {{currentData.cr}} ummol/L </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">尿素氮</span>
						</template>
						<template #value> {{currentData.ureaNitrogen}} mmol/L </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">肾小球滤过率（GFR）</span>
						</template>
						<template #value> {{currentData.gfr}} </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">内生肌酐清除率</span>
						</template>
						<template #value> {{currentData.creatinineRate}} </template>
					</van-cell>
				</van-cell-group>

				<div id="sub-title">
					<div class="icon"></div>
					<div class="text">酮体检查</div>
				</div>
				<van-cell-group inset>
					<van-cell>
						<template #title>
							<span class="custom-title">检查日期</span>
						</template>
						<template #value> {{currentData.urineKetoneDate}} </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">尿酮体</span>
						</template>
						<template #value>
							{{currentData.urineKetone == 1 ? '阴性' : currentData.urineKetone
							== 2 ? '弱阳性' : currentData.urineKetone == 3 ? '阴性':
							currentData.urineKetone == 3 ? '强阳性': '--'}}
						</template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">血酮体</span>
						</template>
						<template #value> {{currentData.bloodKetone}} </template>
					</van-cell>
				</van-cell-group>

				<div id="sub-title">
					<div class="icon"></div>
					<div class="text">血气分析及其它</div>
				</div>
				<van-cell-group inset>
					<van-cell>
						<template #title>
							<span class="custom-title">检查日期</span>
						</template>
						<template #value> {{currentData.phDate}} </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">血气分析-PH</span>
						</template>
						<template #value> {{currentData.ph}} </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">血气分析-HCO3</span>
						</template>
						<template #value> {{currentData.hco3}} </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">电解质（Na+）</span>
						</template>
						<template #value> {{currentData.na}} </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">电解质（K+）</span>
						</template>
						<template #value> {{currentData.kei}} </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">血浆渗透压</span>
						</template>
						<template #value> {{currentData.opp}} </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">溃疡组织培养药敏试验</span>
						</template>
						<template #value>
							{{currentData.ulcerativeDrugSensitivity}}
						</template>
					</van-cell>
				</van-cell-group>
				<van-divider
					:style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 0.5rem' }"
				>
				</van-divider>
				<van-cell-group inset>
					<van-cell>
						<template #title>
							<span class="custom-title">检查报告名称</span>
						</template>
						<template #value> {{currentData.reportName}} </template>
					</van-cell>
					<van-cell>
						<template #title>
							<span class="custom-title">检查报告结论</span>
						</template>
						<template #value> {{currentData.reportConclusion}} </template>
					</van-cell>
					<van-cell>
						<div class class="custom-title">检查报告图片</div>
						<div class="images-list">
							<div v-viewer="{movable: false}">
								<img
									v-for="src in currentData.laboratoryPhotosUrl"
									:src="src"
									:key="src"
									class="image-item"
								/>
							</div>
						</div>
					</van-cell>
				</van-cell-group>
			</div>
		</div>
	</body>
	<!-- 上线环境用 -->
	<script src="../../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../../common/js/axios.min.js"></script>
	<script src="../../base.js"></script>
	<!-- viewer 图片预览 -->
	<script src="../../common/js/viewer.js"></script>
	<script src="../../common/js/index.umd.js"></script>
	<script src="../js/echarts.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			getUrl,
		} from '../../common/js/api/vue3-axios-utils.js'
		import { lineCharts, uuid } from '../js/charts-components.js'
		const PatientData = {
			data() {
				return {
					initCharts: uuid(),
					url: {
						getInfo: '/102/13/1021302',
						updateInfo: '/102/13/1021301',
					},
					currentData: {},
					patient_url: '../index.html?userid=',
					charts: {
						axisData1: [
							'空腹血糖(服糖前)',
							'30min血糖',
							'1h血糖',
							'2h血糖',
							'3h血糖',
						],
						axisData2: [
							'空腹胰岛素(服糖前)',
							'30min胰岛素',
							'1h胰岛素',
							'2h胰岛素',
							'3h胰岛素',
						],
						axisData3: [
							'空腹C肽(服糖前)',
							'30minC肽',
							'1hC肽',
							'2hC肽',
							'3hC肽',
						],
						axisUnit: '',
						xAxisLabel: {
							show: true,
							fontsize: 12,
							interval: 0,
						},
						legend1: ['血糖'],
						legend2: ['胰岛素'],
						legend3: ['C肽'],
						showLegend: [],
						seriesData1: [],
						seriesData2: [],
						seriesData3: [],
						style1: {
							color: 'rgba(197,247,235,0.5)',
						},
						style2: {
							color: 'rgba(297,232,247,0.5)',
						},
						style3: {
							color: 'rgba(247,197,203,0.5)',
						},
						lineStyle: [
							{
								index: 0,
								lineColor: '#f06980',
								textColor: '#4d4d4d',
								data: [60, 140],
							},
						],
						areaStyle: [],
					},
				}
			},
			created() {
				this.getData().catch(error => {
					console.log(error)
				})
			},

			methods: {
				async getData() {
					let patientId = localStorage.pid

					this.patient_url = this.patient_url + patientId

					let url = getUrl() + this.url.getInfo + '?patientId=' + patientId

					const res = await getAction(url)

					if (res.data.success) {
						this.currentData = await res.data.result
						const seriesData1 = []
						const seriesData2 = []
						const seriesData3 = []
						for (let i in this.currentData) {
							if (
								i == 'sugarLimosis' ||
								i == 'sugar30min' ||
								i == 'sugar1h' ||
								i == 'sugar2h' ||
								i == 'sugar3h'
							) {
								seriesData1.push(this.currentData[i] || 0)
							}
							if (
								i == 'isletLimosis' ||
								i == 'islet30min' ||
								i == 'islet1h' ||
								i == 'islet2h' ||
								i == 'islet3h'
							) {
								seriesData2.push(this.currentData[i] || 0)
							}
							if (
								i == 'peptideLimosis' ||
								i == 'peptide30min' ||
								i == 'peptide1h' ||
								i == 'peptide2h' ||
								i == 'peptide3h'
							) {
								seriesData3.push(this.currentData[i] || 0)
							}
						}
						this.charts.seriesData1.push(seriesData1)
						this.charts.seriesData2.push(seriesData2)
						this.charts.seriesData3.push(seriesData3)
						this.initCharts = uuid()
						console.log(this.charts.seriesData1)
						// this.charts.seriesData1 = this.currentData.

						// 图片数据处理
						this.currentData.laboratoryPhotosUrl =
							this.currentData.laboratoryPhotosUrl.split(',')

						// 时间处理
						let dateRegex = /\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])/g

						for (let property in this.currentData) {
							if (dateRegex.test(this.currentData[property])) {
								this.currentData[property] =
									this.currentData[property].match(dateRegex)[0]
							}
						}
					}
				},
				onClickLeft() {
					window.location.href = '../filesIndex.html'
				},
				onClickRight() {
					window.location.href = '../index.html?userid=' + localStorage.pid
				},
			},
			components: {
				lineCharts: lineCharts,
			},
		}

		const app = Vue.createApp(PatientData)

		app.use(vant)

		app.use(VueViewer.default)

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount('#app')
	</script>
</html>
